import React from 'react';
import PropTypes from 'prop-types';
import { Form, Button, Row, Col, DatePicker, Input } from 'antd';

const { Search } = Input;

const ColProps = {
    xs: 24,
    sm: 12,
    style: {
        margin: 16,
        marginBottom: 30 ,
    },
};
// const filterProps = {
//     filter: {
//         ...query,
//     },
//     onFilterChange (value) {
//         dispatch(routerRedux.push({
//             pathname: location.pathname,
//             search: queryString.stringify({
//                 ...value,
//                 page: 1,
//                 pageSize,
//             }),
//         }))
//     },
//     onAdd () {
//         dispatch({
//             type: 'user/showModal',
//             payload: {
//                 modalType: 'create',
//             },
//         })
//     }
// };

const Filter = ({ onAdd, onFilterChange, filter, form }) => {
    const { getFieldDecorator, getFieldsValue, setFieldsValue } = form;

    const handleSubmit = () => {
        let fields = getFieldsValue();
        onFilterChange(fields)
    };

    const handleReset = () => {
        const fields = getFieldsValue();
        for (let item in fields) {
            if ({}.hasOwnProperty.call(fields, item)) {
                if (fields[item] instanceof Array) {
                    fields[item] = []
                } else {
                    fields[item] = undefined
                }
            }
        }
        setFieldsValue(fields);
        handleSubmit()
    };

    const handleChange = (key, values) => {
        let fields = getFieldsValue();
        fields[key] = values;
        onFilterChange(fields)
    };

    const { name, createTime, age } = filter;

    return (
        <Row gutter={24} align={'middle'}>
            <Col {...ColProps} xl={{ span: 4 }} md={{ span: 8 }}>
                {getFieldDecorator('name', { initialValue: name })(<Search placeholder="Search Name" onSearch={handleSubmit} />)}
            </Col>
            <Col {...ColProps} xl={{ span: 4 }} md={{ span: 8 }}>
                {getFieldDecorator('phone', { initialValue: age })(<Search placeholder="Search Phone" onSearch={handleSubmit} />)}
            </Col>
            <Col {...ColProps} xl={{ span: 4 }} md={{ span: 8 }}>
                {getFieldDecorator('createTime', { initialValue: createTime })(<DatePicker placeholder="Select CreateTime" onChange={handleChange} />)}
            </Col>
            <Col {...ColProps} xl={{ span: 8 }} md={{ span: 24 }} sm={{ span: 24 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap' }}>
                    <Button type="primary" style={{margin:0}} onClick={handleSubmit}>Search</Button>
                    <Button style={{margin:0}} onClick={handleReset}>Reset</Button>
                    <Button style={{margin:0}} onClick={onAdd}>Create</Button>
                </div>
            </Col>
        </Row>
    )
};

Filter.propTypes = {
    onAdd: PropTypes.func,
    form: PropTypes.object,
    filter: PropTypes.object,
    onFilterChange: PropTypes.func,
};

export default Form.create()(Filter);
